<template>
 <div class="breadcrumd">
        <div class="scrollview" id="scrollview" v-if="SettingStore.breadcrumdlist">
            <div v-for="item, index in SettingStore.breadcrumdlist" class="pane" @click.stop="router.push(item.path)"
                :class="{ active: item.path === route.path }">
                <span>{{ item?.name }}</span>
                <IEpClose class="close_icon" v-if="index !== 0" @click.stop="remove(item)" />
            </div>
        </div>
        <span class="arrow arrowLeft">
            <svg-icon name="left-double-arrow" @click="slide(-200)"></svg-icon>
        </span>
        <span class="arrow arrowRight">
            <svg-icon name="right-double-arrow" @click="slide(200)"></svg-icon>
        </span>
        <span class="more">
            <el-dropdown @command="command">
                <svg-icon name="more" @click="slide(200)"></svg-icon>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="all">
                            关闭全部
                        </el-dropdown-item>
                        <el-dropdown-item command="other">
                            关闭其他
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </span>
    </div>
</template>

<script lang='ts' setup>
import { useSetting } from '@/pinia';
import { useRouter, useRoute } from 'vue-router'
interface Breadcrumd {
    path: string
    name: string
}
const SettingStore = useSetting()
const router = useRouter()
const route = useRoute()
// 动画定时器
let animateTimer: any
// 删除
const remove = (item: Breadcrumd) => {

    const r = SettingStore.breadcrumdlist?.findIndex(ele => item.path === ele.path)

    // 删除标签页
    SettingStore.removeBreadcrumd(item)

    const routeItem = SettingStore.breadcrumdlist[r ? r - 1 : 0]

    // 导航到上一个路由
    router.push(routeItem.path)
}
// 滑动
const slide = (num: number) => {
    let d = document.getElementById("scrollview") as HTMLDivElement
    num > 0 ? animate(d, d.scrollLeft + num, 5) : animate(d, d.scrollLeft + num, -5)
}
// 动画效果
const animate = (ele: HTMLElement, target: number, step: number) => {
    clearInterval(animateTimer);
    animateTimer = setInterval(function () {
        if (step > 0) {
            ele.scrollLeft >= target ? clearInterval(animateTimer) : ele.scrollLeft = ele.scrollLeft + step
        } else {
            ele.scrollLeft <= target ? clearInterval(animateTimer) : ele.scrollLeft = ele.scrollLeft + step
        }
    }, 10)
}

const command = (type: string) => {
    if (type === "all") {
        SettingStore.$patch({
            breadcrumdlist: [{ path: "/home", name: "首页" }]
        })
        router.push("/home")
    }
    if (type === "other") {
        let bl = SettingStore.breadcrumdlist.map(item => item.path === route.path ? item : false).filter(Boolean) as Breadcrumd[]
        let tabs = bl[0].path === "/home" ? [] : bl
        SettingStore.$patch({
            breadcrumdlist: [{ path: "/home", name: "首页" }, ...tabs]
        })
    }
}



</script>

<style lang="less" scoped>
.breadcrumd {
    width: 100%;
    height: 35px;
    padding: 0 80px 0px 40px;
    overflow: hidden;
    position: relative;

    .scrollview {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
    }



    .pane+.pane {
        margin-left: 10px;

        &:hover {
            padding-right: 30px;
            color: var(--active-color);

            .close_icon {
                transform: translate(-20%, -50%);
            }
        }
    }
}

.pane {
    height: 100%;
    padding: 0px 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    position: relative;
    transition: padding 0.4s;
    overflow: hidden;
    cursor: pointer;
    // 防止元素过多而产生挤压
    flex-shrink: 0;

    .close_icon {
        position: absolute;
        right: 0px;
        top: 50%;
        transform: translate(100%, -50%);
        transition: transform 0.4s;
    }
}

.arrow,
.more {
    position: absolute;
    top: 0px;
    z-index: 1;
    width: 40px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color);

    &:hover {
        color: var(--active-color);
    }
}

.arrowLeft {
    left: 0px;
}

.arrowRight {
    width: 40px;
    right: 25px;
}

.more {
    right: 0px;

    .svg-icon {
        font-size: 22px;
    }
}

.active {
    color: var(--active-color);
    position: relative;

    &::after {
        content: "";
        position: absolute;
        left: 0px;
        bottom: 0px;
        width: 100%;
        height: 3px;
        background-color: var(--active-color);
    }
}
</style>